@import "mixins/mixins";
@import "common/var";

@include b(input-mixin) {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 180px;
  line-height: 0;
  ul {
    margin: 0;
    padding: 0;
    width: 100%;
    & > li{
      margin-left: 10px;
    }
    .el-input-mixin__outer:first-child{
      margin-left: 0;
    }
    .el-input-mixin__outer {
      cursor: pointer;
      display: inline-block;
      color: $--color-text-regular;
      font-size: $--font-size-base;
      list-style: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      
      .el-input-mixin__inner {
        display: inline-block;
        height: $--input-height;
        min-width: 60px;
        -webkit-appearance: none;
        text-align: center;
        background-color: $--input-fill;
        background-image: none;
        border-radius: $--input-border-radius;
        border: $--input-border;
        box-sizing: border-box;
        color: $--input-color;
        font-size: inherit;
        line-height: $--input-height;
        outline: none;
        transition: $--border-transition-base;
        
        &:focus {
          outline: none;
          border-color: $--input-focus-border;
        }
      }
    }
  }

  @include e((increase, decrease)) {
    position: absolute;
    z-index: 1;
    top: 1px;
    width: $--input-height;
    height: auto;
    text-align: center;
    background: $--background-color-base;
    color: $--color-text-regular;
    cursor: pointer;
    font-size: 13px;

    &:hover {
      color: $--color-primary;

      &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
        border-color: $--input-focus-border;
      }
    }

    &.is-disabled {
      color: $--disabled-color-base;
      cursor: not-allowed;
    }
  }

  @include e(increase) {
    right: 1px;
    border-radius: 0 $--border-radius-base $--border-radius-base 0;
    border-left: $--border-base;
  }

  @include e(decrease) {
    left: 1px;
    border-radius: $--border-radius-base 0 0 $--border-radius-base;
    border-right: $--border-base;
  }

  @include when(disabled) {
    @include e((increase, decrease)) {
      border-color: $--disabled-border-base;
      color: $--disabled-border-base;

      &:hover {
        color: $--disabled-border-base;
        cursor: not-allowed;
      }
    }
  }

  @include m(medium) {
    width: 200px;
    line-height: #{$--input-medium-height - 2};

    @include e((increase, decrease)) {
      width: $--input-medium-height;
      font-size: $--input-medium-font-size;
    }

    .el-input__inner {
      padding-left: #{$--input-medium-height + 7};
      padding-right: #{$--input-medium-height + 7};
    }
  }

  @include when(without-controls) {
    .el-input__inner {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  @include when(controls-right) {
    .el-input__inner {
      padding-left: 15px;
      padding-right: #{$--input-height + 10};
    }

    @include e((increase, decrease)) {
      height: auto;
      line-height: #{($--input-height - 2) / 2};

      [class*=el-icon] {
        transform: scale(.8);
      }
    }

    @include e(increase) {
      border-radius: 0 $--border-radius-base 0 0;
      border-bottom: $--border-base;
    }

    @include e(decrease) {
      right: 1px;
      bottom: 1px;
      top: auto;
      left: auto;
      border-right: none;
      border-left: $--border-base;
      border-radius: 0 0 $--border-radius-base 0;
    }

    &[class*=medium] {
      [class*=increase], [class*=decrease] {
        line-height: #{($--input-medium-height - 2) / 2};
      }
    }
  }
}